<template>
  <div class="text_wrap">
    <boxWrap :config="config">
      <div class="text" :style="styleObject">
        在实践中，这种极端情况并不常见，因为原生表单字段通常包裹在实际应用的组件中。如果确实需要直接使用原生元素，那么你可以手动将 v-model 拆分为 attribute 和事件
      </div>
    </boxWrap>
  </div>
</template>

<script>
import boxWrap from '../base/boxWrap'
export default {
  name: 'TextChart',
  components: {
    boxWrap
  },
  props: {},
  data() {
    return {
      config: {
        width: 200,
        height: 150,
        x: 20,
        y: 10,
        fontSize: 14,
        fontWeight: 'normal',
        lineHeight: 'normal',
        fontColor: '#000000',
        textAlign: 'left',
        letterSpacing: 'normal',
        fontFamily: 'initial',
        backgroundColor: 'transparent',
        paddingTop: 0,
        paddingRight: 0,
        paddingBottom: 0,
        paddingLeft: 0,
        marginTop: 0,
        marginRight: 0,
        marginBottom: 0,
        marginLeft: 0,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: '#000000',
        borderRadius: 5,
      }
    }
  },
  computed: {
    styleObject() {
      return {
        // width: `${this.config.width}px`,
        // height: `${this.config.height}px`,
        // transform: `translate(${this.config.x}px,${this.config.y}px)`,
        fontSize: `${this.config.fontSize}px`,
        fontWeight: `${this.config.fontWeight}`,
        lineHeight: `${this.config.lineHeight}`,
        fontColor: `${this.config.fontColor}`,
        textAlign: `${this.config.textAlign}`,
        letterSpacing: `${this.config.letterSpacing}`,
        fontFamily: `${this.config.fontFamily}`,
        backgroundColor: `${this.config.backgroundColor}`,
        paddingTop: `${this.config.paddingTop}px`,
        paddingRight: `${this.config.paddingRight}px`,
        paddingBottom: `${this.config.paddingBottom}px`,
        paddingLeft: `${this.config.paddingLeft}px`,
        marginTop: `${this.config.marginTop}px`,
        marginRight: `${this.config.marginRight}px`,
        marginBottom: `${this.config.marginBottom}px`,
        marginLeft: `${this.config.marginLeft}px`,
        border: `${this.config.borderWidth}px ${this.config.borderStyle} ${this.config.borderColor}`,
        borderRadius: `${this.config.borderRadius}px`,
      };
    }
  },
  watch: {},
  created() { },
  mounted() { },
  methods: {}
}
</script>

<style scoped lang="scss"></style>
